<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>第一个vue的页面</h2>
      <!-- 直接使用双大括号模板语法，将data的变量直接渲染到页面上 -->
      <div>{{ message }}</div>
      <ul>
        <!-- v-开头的叫做指令 -->
        <!-- v-for就是一个循环渲染的指令 -->
        <!-- <li v-for="item in list">{{ item }}</li> -->
        <li v-for="item in list">
          {{ item.title }}的库存还剩
          <!-- v-model指令用于做数据的双向绑定 -->
          <input v-model="item.count" type="number" />件
          <!-- v-if指令用于做条件判断 -->
          <span v-if="item.count === 0">卖完了</span>
        </li>
      </ul>
      <p>总共的库存还剩{{ total }}件</p>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      // 从vue里面解构createApp方法，用于生成Vue实例的
      const { createApp } = Vue;

      // 这个对象可以传入一个配置对象
      const app = createApp({
        // data就是其中的一个配置对象(option, 选项)
        data() {
          return {
            message: "Hello Vue!",
            // list: ["🍎", "🍌", "🍉"],
            list: [
              {
                title: "🍎",
                count: 3,
              },
              {
                title: "🍌",
                count: 0,
              },
              {
                title: "🍉",
                count: 5,
              },
            ],
          };
        },
        // mounted相当于js里面的 window.onload
        mounted() {
          // console.log(this.message);
          // data的数据改变了，页面就会重新渲染，称之为响应式
          // 以后全部都是操作数据(数据驱动)，再也没有dom操作了
          this.message = "haha";
        },
        // computed叫做计算属性
        // 根据现有的data的数据，去计算得到一个新的值
        // 里面写函数，需要return
        computed: {
          total() {
            return this.list.reduce((sum, item) => {
              return (sum += item.count);
            }, 0);
          },
        },
      });

      // mount表示挂载到某个元素，只有挂载到的那个元素可以被vue控制
      app.mount("#app");
    </script>
  </body>
</html>
